<template>
  <div class="License">
    <div class="page-head">
      <div class="page-bread">
        <div class="bread-prev" @click="back">
          机构管理
        </div>
        <div class="bread-divider">
          /
        </div>
        <div class="bread-now">
          账号列表
        </div>
      </div>
      <div class="page-tool">
        <search-input placeholder="账号搜索" @search="searchChange" />
        <div class="tool-btn" @click="open('add')">新增子账号</div>
      </div>
    </div>
    <org-info />
    <div class="page-body">
      <div class="table_data">
        <el-scrollbar class="scroll-bar">
          <el-table :data="tableData" stripe>
            <el-table-column
              width="20"
            />
            <el-table-column
             :show-overflow-tooltip="true"
              prop="account"
              label="账号"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              :show-overflow-tooltip="true"
              label="昵称"
            >
            </el-table-column>
            <el-table-column
              prop="password"
              :show-overflow-tooltip="true"
              label="密码"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              label="手机号"
            >
            </el-table-column>
            <el-table-column label="账号类型"  :show-overflow-tooltip="true">
              <template slot-scope="{row}">
                <div>
                  {{masters.find(m => m.key === row.master).value}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="{row}">
                <div class="operation-col">
                  <div class="txt-btn ope-btn primary" @click="open('edit', row)">修改资料</div>
                  <div class="txt-btn" :disabled="row.master == 1" :class="{'error': row.master == 0, 'grey notAllow' : row.master == 1 }" @click="doDelete(row)">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <div class="page-footer">
        <pagina-tion
          class="page-pager"
          v-show="total>=0"
          :background="true"
          :total="total"
          :offset.sync="offset"
          :limit.sync="limit"
          @pagination="getChangePage"
        />
       <button class="page-button">确定</button>
      </div>
    </div>
    <!-- 新增和修改弹框 -->
    <el-dialog :visible.sync="model.visible" width="450px" title="账号信息" :close-on-click-modal="false" :show-close="false">
      <div class="dialog-body">
        <el-form ref="form" :model="form" label-width="90px" label-position="left">
          <el-form-item label="账号" class="required">
            <el-input
              placeholder="请输入账号"
              name='accounts'
              v-model="form.account"
              v-validate="'required|username'"
              @keydown.native="keydown($event)"
            />
            <div v-show="errors.has('accounts')" class="el-form-item__error">{{ errors.first('accounts') }}</div>
          </el-form-item>
          <el-form-item label="昵称" class="required">
            <el-input
              placeholder="请输入昵称"
              name='nickName'
              v-model.trim="form.name"
              v-validate="'required|nickName'"
            />
            <div v-show="errors.has('nickName')" class="el-form-item__error">{{ errors.first('nickName') }}</div>
          </el-form-item>
           <el-form-item label="密码" class="required">
            <el-input
              placeholder="请输入密码"
              name='password'
              v-model="form.password"
              v-validate="'required|old-password'"
              @keydown.native="keydown($event)"
            />
            <div v-show="errors.has('password')" class="el-form-item__error">{{ errors.first('password') }}</div>
          </el-form-item>
          <el-form-item label="手机号" class="required">
            <el-input
              placeholder="请输入手机号"
              name='phone'
              v-model="form.phone"
              v-validate="'required|phone'"
              @keydown.native="keydown($event)"
            />
            <div v-show="errors.has('phone')" class="el-form-item__error">{{ errors.first('phone') }}</div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 重置弹窗 -->
    <el-dialog
      :visible.sync="resetVisibility"
      width="430px"
      height="100px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-content comfirm-body">
        <img class="comfirm-ico"
             src="~assets/img/warning.png">
        <div class="comfirm-txt">
          <div>
            确定重置该条账号？
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetVisibility = false">取 消</el-button>
        <el-button type="primary" @click="custorPassword">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 删除弹窗 -->
    <el-dialog
      :visible.sync="visibility"
      width="430px"
      height="100px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-content comfirm-body">
        <img class="comfirm-ico"
             src="~assets/img/warning.png">
        <div class="comfirm-txt">
          <div>
            确定删除该条数据？
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visibility = false">取 消</el-button>
        <el-button type="primary" @click="orgDelete">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import * as api from '@/api'
import { limit,bigLimit } from '@/consts/consts'
import { masters } from '@/consts/codesMap'
import { customerKey } from '@/consts/formKey'
export default {
  data() {
    return {
      limit:document.body.clientHeight >= 770 ? limit : bigLimit,
      total: 0,
      offset: 0,
      tableData: [],
      masters,
      customer_id: '',
      model: {
        type: 'add',
        visible: false
      },
      visibility: false,
      resetVisibility: false,
      stopVisable: false,
      form: {
        ...customerKey
      },
      user_role: localStorage.getItem('user_role')
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },

    
    keydown(event){
      if (event.keyCode == 32) {
        event.returnValue = false
      }
    },

    open(type, row=null) {
      this.$validator.reset()
      this.model.type = type
      if (row) {
        for (const k in customerKey) {
          this.form[k] = row[k]
        }
        this.customer_id = row.customer_id
      }
      this.model.visible = true
    },
    
    doDelete(row) {
      if(row.master == 1){
        return false
      }
      this.customer_id = row.customer_id
      this.visibility = true
    },
    orgDelete(){
      this.customerDelete()

    },
    getChangePage(val) {
      this.offset = val.offset
      this.customerList()
    },
    
    searchChange(e) {
      this.search = e
      this.offset = 0
      this.customerList()
    },
    
    close() {
      this.model.visible = false
      this.form = {...customerKey}
    },
    
    submit() {
      this.$validator.validateAll().then(valid => {
        if (valid) {
          this.addOrEdit()
        } else {
          this.$message.warning('有信息未填写正确')
        }
      })
    },
    custorPassword(){
      this.loginResetPassword()
    },
    

    async customerList() {
      const { code, data, total } = await api.customer(this).customerList({
        org_id: this.$route.params.id,
        offset: this.offset,
        limit: this.limit,
        account: this.search,
      })
      if (code === 0) {
        this.tableData = data.map(el => {
          el.password = window.atob(el.password)
          return el
        })
        console.log('表格： ', this.tableData)
        this.total = total
      }
    },
    
    async addOrEdit() {
      let fn = this.model.type === 'add' ? 'customerAdd' : 'customerUpdate'
      let form = { ... this.form }
      form.org_id = this.$route.params.id
      form.password = window.btoa(form.password)
      console.log("form: ", form)
      const { code } = await api.customer(this)[fn](form, this.customer_id)
      if (code === 0) {
        this.$message.success('操作成功')
        this.close()
        this.customerList()
      }
    },
    
    async customerDelete() {
      const { code, data } = await api.customer(this).customerDelete(this.customer_id)
      if (code === 0) {
        this.$message.success('操作成功')
        this.customer_id = ''
        this.visibility = false
        if (this.total % this.limit === 1) {
          if (this.offset >= this.limit) {
            this.offset -= this.limit
          }
        }
        this.customerList()
      }
    },
   
   async loginResetPassword() {
      const { code, data } = await api.login(this).loginResetPassword({
        user_id: this.customer_id,
        type: 1
      })
      if (code === 0) {
        this.$message.success('操作成功')
        this.customer_id = ''
        this.resetVisibility = false
        this.customerList()
      }
    },


  },
  created () {
    this.customerList()
  },
}
</script>

<style lang="stylus">
.Customer {

}
</style>